<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>添加数据认证</title>
    <script src="https://cdn.tailwindcss.com"></script>
    <link href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.7.2/css/all.min.css" rel="stylesheet">
    <style>
        body {
            background: linear-gradient(135deg, #003366 0%, #0099cc 30%, #66ccff 70%, #99ffff 100%);
            min-height: 100vh;
            display: flex;
            justify-content: center;
            align-items: center;
        }
    </style>
</head>
<! 这是页面的头部，主要设置了页面美化、语言设置和确保中文正常显示和移动端适配等功能 -->

<body>
<!-- 表单开始，用于上传数据文件和填写相关信息 -->
    <form id="add-data-‘form" class="bg-white p-8 rounded shadow-md space-y-6" method="post" enctype="multipart/form-data" action="{% url 'data_import' %}">
        <!-- 与script相关联起来 -->
        {% csrf_token %}
        <!-- CSRF令牌，防止跨站请求伪造攻击 -->
        <h2 class="text-2xl font-bold text-center">上传数据文件</h2>

        <!-- 电话号码字段 -->
        <div>
            <label for="phone-number" class="block text-sm font-medium text-gray-700">电话号码：</label>
            <!-- 输入框标签，关联到id为phone-number的输入框 -->
            <input type="tel" id="phone-number" name="phone_number"
                class="mt-1 block w-full px-3 py-2 border border-gray-300 rounded-md shadow-sm focus:outline-none focus:ring-blue-500 focus:border-blue-500 sm:text-sm"
                value="{{ request.user.phone_number }}"
                readonly required>
            <!-- 电话号码输入框：类型为tel，值从request.user.phone_number获取，只读且必填 -->
        </div>

        <!-- 数据名称字段 -->
        <div>
            <label for="data-name" class="block text-sm font-medium text-gray-700">数据名称：</label>
            <!-- 输入框标签，关联到id为data-name的输入框 -->
            <input type="text" id="data-name" name="data_name" class="mt-1 block w-full px-3 py-2 border border-gray-300 rounded-md shadow-sm focus:outline-none focus:ring-blue-500 focus:border-blue-500 sm:text-sm" required>
            <!-- 文本输入框：必填 -->
        </div>

        <!-- 数据描述字段 -->
        <div>
            <label for="data-description" class="block text-sm font-medium text-gray-700">数据描述：</label>
            <!-- 输入框标签，关联到id为data-description的输入框 -->
            <input type="text" id="data-description" name="data_description" class="mt-1 block w-full px-3 py-2 border border-gray-300 rounded-md shadow-sm focus:outline-none focus:ring-blue-500 focus:border-blue-500 sm:text-sm" required>
            <!-- 文本输入框：必填 -->
        </div>

        <!-- 数据文件选择字段 -->
        <div>
            <label for="data-file" class="block text-sm font-medium text-gray-700">选择文件：</label>
            <!-- 输入框标签，关联到id为data-file的输入框 -->
            <input type="file" id="data-file" name="data_file" class="mt-1 block w-full" required>
            <!-- 文件选择输入框：必填 -->
        </div>
        <button type="submit" class="w-full flex justify-center py-2 px-4 border border-transparent rounded-md shadow-sm text-sm font-medium text-white bg-blue-600 hover:bg-blue-700 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-blue-500">认证确认</button>
    </form>

<!-- JavaScript脚本，处理表单提交事件 -->
    <script>
        document.getElementById('add-data-form').addEventListener('submit', async function(e) {
            e.preventDefault();// 阻止默认的表单提交行为
            const formData = new FormData(this);// 创建FormData对象，包含表单数据

            try {
                const response = await fetch(this.action, {
                    method: 'POST',// 请求方法为POST
                    headers: {
                        'X-CSRFToken': formData.get('csrfmiddlewaretoken')// 包含CSRF令牌
                    },
                    body: formData// 请求体为FormData对象
                });

                if (response.ok) {
                    window.location.href = "{% url 'Mydata' %}";// 如果响应成功，跳转到"Mydata"页面
                } else {
                    const errorData = await response.json();
                    alert(errorData.error || '上传失败');
                }
            } catch (error) {
                console.error('请求出错:', error);
                alert('数据提交失败');
            }
        });
    </script>
</body>

</html>